<template>
  <div class="app-container">
    <el-row :gutter="3">
      <el-col :xs="24" :sm="12" :md="9" :lg="9" :xl="9">
        <el-form inline>
          <el-form-item>
            <product-series-cascade @change="productChange" />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="status"
              :placeholder="$t('status')"
              @change="statusChange"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="chooseDeviceCoreList.length > 1">
            <el-button
              icon="el-icon-document-copy"
              type="primary"
              @click="dialogAnalysisVisible = true"
            >{{ $t('comparison') }}</el-button>
          </el-form-item>
          <el-form-item v-if="chooseDeviceCoreList.length > 1">
            <el-button
              icon="el-icon-s-tools"
              type="primary"
              @click="dialogCommonSettingVisible = true"
            >{{ $t('setting') }}</el-button>
          </el-form-item>
        </el-form>
        <div
          class="uni-scroll"
          style="height: calc(100vh - 170px);"
        >
          <el-tree
            v-if="afterArea"
            :props="areaTressList"
            :load="loadAreaDevice"
            lazy
            show-checkbox
            @check-change="handleCheckChange"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node" style="width: 600px">
              <span v-if="!data.device">{{ node.label }}</span>
              <span v-else @click="device = data.device">
                <i
                  class="el-icon-setting"
                  @click="() => deviceSetting(data.device)"
                />
                <i
                  class="el-icon-menu"
                  @click="() => deviceMore(data.device)"
                />
                <app-surplus style="display: inline-block" :device="data.device" />
                <span :class="data.device.status" style="margin-right: 100px">{{ node.label }}</span>
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="15" :lg="15" :xl="15">
        <div
          class="uni-scroll"
          style="height: calc(100vh - 120px)"
        >
          <sensor-camera-list :device="device" />
        </div>
      </el-col>
    </el-row>

    <el-dialog
      :visible.sync="showSetting"
      :title="device.deviceName"
      width="1200px"
      top="15px"
    >
      <device-setting
        :device-core="device.deviceCore"
        class="uni-scroll"
        style="height: 600px"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="dialogAnalysisVisible"
      top="15px"
      width="90%"
    >
      <device-sensor-analysis v-if="dialogAnalysisVisible" :device-core-list="chooseDeviceCoreList" />
    </el-dialog>

    <el-dialog
      :visible.sync="dialogCommonSettingVisible"
      destroy-on-close
      width="1400px"
      top="15px"
    >
      <device-list-setting
        :device-core-list="chooseDeviceCoreList"
        class="uni-scroll"
        style="height: 600px"
      />
    </el-dialog>

  </div>
</template>
<script>
import SensorCameraList from '@/components/SensorCameraList'
import AppSurplus from '@/components/AppSurplus/index'
import { listDeviceStatus } from '@/util/common'
import { getSearchDeviceStatus, getUserId, setSearchDeviceStatus } from '@/util/storage'
import {
  cityDeviceNum,
  getBelongDeviceList,
  provinceDeviceNum
} from '@/api/iot/iotDeviceBelongApi'
import DeviceSetting from '@/components/DeviceSetting'
import DeviceListSetting from '@/components/DeviceListSetting'
import ProductSeriesCascade from '@/components/ProductSeriesCascade'
import DeviceSensorAnalysis from '@/components/DeviceSensorAnalysis'

export default {
  name: 'AreaModel',
  components: {
    SensorCameraList,
    DeviceSetting,
    AppSurplus,
    ProductSeriesCascade,
    DeviceSensorAnalysis,
    DeviceListSetting
  },
  data() {
    return {
      dialogCommonSettingVisible: false,
      dialogAnalysisVisible: false,
      afterArea: false,
      userId: getUserId(),
      device: {},
      areaList: [],
      areaTressList: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
      showSetting: false,
      productId: null,
      seriesId: null,
      chooseDeviceCoreList: [],
      statusList: [],
      status: getSearchDeviceStatus()
    }
  },
  mounted() {
    this.statusList = listDeviceStatus(this)
    this.provinceDeviceNum()
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      if (!data.device) {
        return
      }
      const chooseDeviceCoreList = this.chooseDeviceCoreList
      if (checked) {
        chooseDeviceCoreList.push(data.device.deviceCore)
      } else {
        for (let i = 0, j = chooseDeviceCoreList.length; i < j; i++) {
          if (chooseDeviceCoreList[i] === data.device.deviceCore) {
            chooseDeviceCoreList.splice(i, 1)
            break
          }
        }
      }
      this.chooseDeviceCoreList = chooseDeviceCoreList
    },
    statusChange(val) {
      this.provinceDeviceNum()
      setSearchDeviceStatus(this.status)
    },
    productChange(val) {
      this.productId = val.productId
      this.seriesId = val.seriesId
      this.provinceDeviceNum()
    },
    deviceSetting(item) {
      this.device = item
      this.showSetting = true
    },
    deviceMore(item) {
      this.device = item
      this.$router.push({
        path: '/device/manage/' + this.device.deviceCore,
        query: {
          deviceCore: this.device.deviceCore,
          deviceName: this.device.deviceName
        }
      })
    },
    loadAreaDevice(node, resolve) {
      if (node.level === 0) {
        const areaNodeList = []
        for (const area of this.areaList) {
          areaNodeList.push({
            name: area.province,
            provinceId: area.provinceId,
            seriesId: area.seriesId
          })
        }
        return resolve(areaNodeList)
      } else if (node.level === 1) {
        cityDeviceNum({
          userId: this.userId,
          productId: this.productId,
          status: this.status,
          provinceId: node.data.provinceId
        }).then(res => {
          const { code, data } = res
          if (code === '200') {
            const areaNodeList = []
            for (const city of data) {
              areaNodeList.push({
                name: city.city,
                cityId: city.cityId
              })
            }
            resolve(areaNodeList)
          } else {
            resolve([])
          }
        })
      } else {
        getBelongDeviceList({
          userId: this.userId,
          status: this.status,
          productId: this.productId,
          cityId: node.data.cityId
        }).then(res => {
          const { code, data } = res
          if (code === '200') {
            const areaNodeList = []
            for (const belong of data) {
              areaNodeList.push({
                name: belong.deviceName,
                device: belong,
                leaf: true
              })
            }
            resolve(areaNodeList)
          } else {
            resolve([])
          }
        })
      }
    },
    provinceDeviceNum() {
      this.chooseDeviceCoreList = []
      this.afterArea = false
      provinceDeviceNum({
        userId: this.userId,
        productId: this.productId,
        seriesId: this.seriesId,
        status: this.status
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          const areaList = []
          for (let i = 0; i < data.length; i++) {
            areaList.push({
              province: data[i].province,
              provinceId: data[i].provinceId,
              num: data[i].num
            })
          }
          this.areaList = areaList
          this.afterArea = true
        }
      })
    }
  }
}
</script>
